<template>
  <div class="merit-box">
    <el-row :gutter="20" type="flex" justify="space-between" align="middle">
      <el-col :span="24">
        <el-popover placement="top" width="225" trigger="hover">
          <el-image
            style="width: 200px; height: 300px"
            :src="collectionCode"
            fit="cover"
          ></el-image>
          <el-avatar
            shape="square"
            :size="50"
            slot="reference"
            :src="avatar"
          ></el-avatar>
        </el-popover>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "meritbox",
  props: {
    avatar: String,
    collectionCode: String
  },
  watch:{
    avatar(val){
      this.avatar = val;
    },
    collectionCode(val){
      this.collectionCode = val;
    }
  }
};
</script>

<style lang="scss" scoped>
.el-avatar:hover {
  box-shadow: 0 4px 8px #2c3e50;
}
</style>